<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  引入vue-->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js"></script>
<!--  引入element ui样式，跟下面的组件配套使用-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css">
<!--  引入element ui组件，可以快速成型项目-->
  <script src="https://unpkg.com/element-ui@2.15.7/lib/index.js"></script>
</head>
<body>
  <div id="app">
    <button @click="getData">获取数据</button>
    <el-table
            :data="tableData"
            style="width: 100%">
      <el-table-column
              prop="id"
              label="id"
              width="180">
      </el-table-column>
      <el-table-column
              prop="temperature"
              label="温度"
              width="180">
      </el-table-column>
      <el-table-column
              prop="receive_timestamp"
              label="上传时间">
      </el-table-column>
    </el-table>

  </div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      tableData: []
    },
    methods: {
      getData: function () {
        this.fetchData()
      },
      fetchData: async function () {
        let response = await fetch('http://localhost:8080/fetchData')
        let result = await response.json()
        // console.log(result.data)
        this.tableData = result.data
      }
    }
  })
</script>

</body>
</html>